import { ref, toRefs } from 'vue';
import useComponentConfig from '@/views/design-center/store/component-config';
import { getIdAndEditIt } from '@/utils/common';
import { cloneDeep } from 'lodash';

export const useAlign = () => {
    const useComponentConfigStore = useComponentConfig();
    const { checkMoreCompoList, pageConfig } = toRefs(useComponentConfigStore);

    const currentCompoAlign = ref('icon-a-icon-Leftalign');

    /**
     * @description: 对选择的数组进行排序
     * @param {*} prop
     * @return {*}
     */
    const compare = (prop) => {
        return function (obj1, obj2) {
            let val1 = obj1[prop];
            let val2 = obj2[prop];
            if (val1 < val2) {
                return -1;
            } else if (val1 > val2) {
                return 1;
            } else {
                return 0;
            }
        };
    };

    const handleCompoAlignChange = (value) => {
        currentCompoAlign.value = value.label;

        let currentValueX; //x轴左侧时为最左侧的起点,右侧的时候为终点,中心的时候为中点

        let currentValueY; //y轴顶点,中点,终点

        if (['left', 'center', 'right', 'average-x'].includes(value.value)) {
            checkMoreCompoList.value.sort(compare('x'));
        } else if (['top', 'middle', 'bottom', 'average-y'].includes(value.value)) {
            checkMoreCompoList.value.sort(compare('y'));
        }

        //上一次是左对齐
        let flagLeft = checkMoreCompoList.value.every((item) => item.x === checkMoreCompoList.value[0].x);

        // 上一次是右对齐
        let flagRight = checkMoreCompoList.value.every((item) => item.x + item.w === checkMoreCompoList.value[0].x + checkMoreCompoList.value[0].w);

        // 上一次是居中对齐
        let flagCenter = checkMoreCompoList.value.every((item) => (item.x + item.w / 2).toFixed(0) === (checkMoreCompoList.value[0].x + checkMoreCompoList.value[0].w / 2).toFixed(0));

        // 上一次是顶部对齐
        let flagTop = checkMoreCompoList.value.every((item) => item.y === checkMoreCompoList.value[0].y);

        // 上一次是纵向居中
        let flagMiddle = checkMoreCompoList.value.every((item) => (item.y + item.h / 2).toFixed(0) === (checkMoreCompoList.value[0].y + checkMoreCompoList.value[0].h / 2).toFixed(0));

        // 上一次是底部对齐
        let flagBottom = checkMoreCompoList.value.every((item) => item.y + item.h === checkMoreCompoList.value[0].y + checkMoreCompoList.value[0].h);

        console.log('上一次flagLeft', flagLeft);
        console.log('上一次flagRight', flagRight);
        console.log('上一次flagCenter', flagCenter);
        console.log('上一次的', checkMoreCompoList.value);

        switch (value.value) {
            case 'left':
                currentValueX = checkMoreCompoList.value[0]?.x;
                checkMoreCompoList.value.forEach((element) => {
                    element.x = currentValueX;
                });
                break;

            case 'center':
                console.log('------1111111--currentValueX');
                if (flagLeft || flagRight) {
                    if (flagLeft) {
                        //上一次是左对齐,x坐标相同
                        checkMoreCompoList.value.sort(compare('w'));
                        currentValueX = checkMoreCompoList.value[checkMoreCompoList.value.length - 1].x + ~~(checkMoreCompoList.value[checkMoreCompoList.value.length - 1].w / 2);
                        console.log('--------currentValueX', currentValueX);
                    } else {
                        //上一次是右对齐,终点相同
                        currentValueX = checkMoreCompoList.value[0].x + ~~(checkMoreCompoList.value[0].w / 2);
                    }
                } else {
                    //(最小起点+最大终点)/2
                    currentValueX =
                        (checkMoreCompoList.value[0]?.x + checkMoreCompoList.value[checkMoreCompoList.value.length - 1]?.x + ~~checkMoreCompoList.value[checkMoreCompoList.value.length - 1]?.w) / 2;
                    console.log('------center--currentValueX', currentValueX, checkMoreCompoList.value);
                }
                checkMoreCompoList.value.forEach((element) => {
                    element.x = currentValueX - ~~(element.w / 2);
                });
                break;

            case 'right':
                if (flagLeft || flagCenter) {
                    if (flagLeft) {
                        //上一次是左对齐,x相同,这一次找w最大的
                        checkMoreCompoList.value.sort(compare('w'));
                        currentValueX = checkMoreCompoList.value[checkMoreCompoList.value.length - 1]?.x + ~~checkMoreCompoList.value[checkMoreCompoList.value.length - 1]?.w;
                    } else {
                        //上一次是居中对齐,这一次找x最小的
                        currentValueX = checkMoreCompoList.value[0]?.x + ~~checkMoreCompoList.value[0]?.w;
                    }
                } else {
                    currentValueX = checkMoreCompoList.value[checkMoreCompoList.value.length - 1]?.x + ~~checkMoreCompoList.value[checkMoreCompoList.value.length - 1]?.w;
                    console.log('来了-111', checkMoreCompoList.value, currentValueX);
                }
                checkMoreCompoList.value.forEach((element) => {
                    element.x = currentValueX - ~~element.w;
                });
                break;

            case 'average-x':
                let averageStartX = checkMoreCompoList.value[0]?.x + ~~checkMoreCompoList.value[0]?.w; //确定第一个的终点
                let averageEndX = checkMoreCompoList.value[checkMoreCompoList.value.length - 1]?.x; //确定最后一个的起点
                //计算除去第一个和最后一个中间元素总的宽度
                let centerArrX = cloneDeep(checkMoreCompoList.value)
                    .splice(1, checkMoreCompoList.value.length - 2)
                    .map((item) => ~~item.w);
                let centerSumW = centerArrX.length <= 1 ? centerArrX[0] : centerArrX.reduce((pre, next) => pre + next);

                // 计算每一个距离的平均宽度
                let averageW = ~~((averageEndX - averageStartX - centerSumW) / (checkMoreCompoList.value.length - 1)).toFixed(0);
                console.log('averageW', averageEndX - averageStartX, averageW, checkMoreCompoList.value.length - 1);
                checkMoreCompoList.value.forEach((element, index) => {
                    if (index !== 0 && index !== checkMoreCompoList.value.length - 1) {
                        //第一个和最后一个位置保持不变中间的进行评分
                        element.x = checkMoreCompoList.value[index - 1].x + ~~checkMoreCompoList.value[index - 1].w + averageW;
                        console.log(index, 66666666, element.x, averageW);
                    }
                });
                console.log('*******', checkMoreCompoList.value, centerSumW);
                break;

            case 'top':
                currentValueY = checkMoreCompoList.value[0]?.y;
                checkMoreCompoList.value.forEach((element) => {
                    element.y = currentValueY;
                });
                break;

            case 'middle':
                if (flagTop || flagBottom) {
                    if (flagTop) {
                        //上一次是左对齐,x坐标相同
                        checkMoreCompoList.value.sort(compare('h'));
                        currentValueY = checkMoreCompoList.value[checkMoreCompoList.value.length - 1].y + ~~(checkMoreCompoList.value[checkMoreCompoList.value.length - 1].h / 2);
                    } else {
                        //上一次是右对齐,终点相同
                        currentValueY = checkMoreCompoList.value[0].y + ~~(checkMoreCompoList.value[0].h / 2);
                    }
                } else {
                    //(最小起点+最大终点)/2
                    currentValueY =
                        (checkMoreCompoList.value[0]?.y + checkMoreCompoList.value[checkMoreCompoList.value.length - 1]?.y + ~~checkMoreCompoList.value[checkMoreCompoList.value.length - 1]?.h) / 2;
                }
                checkMoreCompoList.value.forEach((element) => {
                    element.y = currentValueY - ~~(element.h / 2);
                });
                break;

            case 'bottom':
                if (flagTop || flagMiddle) {
                    if (flagTop) {
                        //上一次是左对齐,x相同,这一次找w最大的
                        checkMoreCompoList.value.sort(compare('h'));
                        currentValueY = checkMoreCompoList.value[checkMoreCompoList.value.length - 1]?.y + ~~checkMoreCompoList.value[checkMoreCompoList.value.length - 1]?.h;
                    } else {
                        //上一次是居中对齐,这一次找x最小的
                        currentValueY = checkMoreCompoList.value[0]?.y + ~~checkMoreCompoList.value[0]?.h;
                    }
                } else {
                    currentValueY = checkMoreCompoList.value[checkMoreCompoList.value.length - 1]?.y + ~~checkMoreCompoList.value[checkMoreCompoList.value.length - 1]?.h;
                }
                checkMoreCompoList.value.forEach((element) => {
                    element.y = currentValueY - ~~element.h;
                });
                break;

            case 'average-y':
                let averageStartY = checkMoreCompoList.value[0]?.y + ~~checkMoreCompoList.value[0]?.h; //确定第一个的终点
                let averageEndY = checkMoreCompoList.value[checkMoreCompoList.value.length - 1]?.y; //确定最后一个的起点
                //计算除去第一个和最后一个中间元素总的宽度
                let centerArrY = cloneDeep(checkMoreCompoList.value)
                    .splice(1, checkMoreCompoList.value.length - 2)
                    .map((item) => ~~item.h);
                let centerSumH = centerArrY.length <= 1 ? centerArrY[0] : centerArrY.reduce((pre, next) => pre + next);

                // 计算每一个距离的平均宽度
                let averageH = ~~((averageEndY - averageStartY - centerSumH) / (checkMoreCompoList.value.length - 1)).toFixed(0);

                checkMoreCompoList.value.forEach((element, index) => {
                    if (index !== 0 && index !== checkMoreCompoList.value.length - 1) {
                        //第一个和最后一个位置保持不变中间的进行评分
                        element.y = checkMoreCompoList.value[index - 1].y + ~~checkMoreCompoList.value[index - 1].h + averageH;
                    }
                });

                break;
            default:
                break;
        }
        checkMoreCompoList.value.forEach((element) => {
            getIdAndEditIt(pageConfig.value.list, element.id, 'styles', {
                x: element.x,
                y: element.y,
                w: element.w,
                h: element.h
            });
        });
        console.log(checkMoreCompoList.value, '------------', currentValueX);
    };

    return {
        currentCompoAlign,
        handleCompoAlignChange
    };
};
